<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge，chrome=1">
    <meta name="renderer" content="webkit">
    <script src="../../../node_modules/jquery/dist/jquery.min.js"></script>
    <link rel="stylesheet" href="../../../node_modules/bootstrap/dist/css/bootstrap.min.css">
    <script src="../../../node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
    <script src="../../../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <script src="../../../node_modules/vue/dist/vue.min.js"></script>
    <link rel="stylesheet" href="../../../node_modules/element-ui/lib/theme-chalk/index.css">
    <script src="../../../node_modules/element-ui/lib/index.js"></script>


    <!-- 自定义 -->
    <script src="../../../node_modules/mockjs/dist/mock.js"></script>
    <script src="../static/js/mock_config.js"></script>
    <script src="../static/js/index.js"></script>
    <link rel="stylesheet" href="../../index.css">

    <!-- PC -->
    <link rel="stylesheet" href="../static/css/Modspeed.css" media="only screen and (max-height:1600px) ">
    <!-- 手机App -->
    <link rel="stylesheet" href="../static/css/ModspeedApp.css" media="only screen and (min-height:1600px) ">
</head>

<body>
    <!--主体-->
    <div class="main clearfix" id="app">
        <div class="header" style="padding-top: 25px; ">
            <header>
                <div class="navbar">
                    <div class="card A">
                        <ul>
                            <li>
                                <h8 style="line-height: 78px;">模具进度看板</h8>
                            </li>
                        </ul>

                    </div>
                    <div class="header_card">
                        <div class="card B" >
                            <ul class="list-group list-group-flush">
                                <li class="list-group-item">
                                    <h4>模具总保有</h4>
                                </li>
                                <li class="list-group-item1">
                                    <h3 id="WaitPrtQty">{{defaultDt1.length}}型</h3>
                                </li>
                            </ul>
                        </div>
                        <div class="card C" >
                            <ul class="list-group list-group-flush">
                                <li class="list-group-item">
                                    <h4>设计中</h4>
                                </li>
                                <li class="list-group-item1">
                                    <h3 id="Waitcompleted">{{defaultDt5.length}}型</h3>
                                </li>
                            </ul>
                        </div>
                        <div class="card C" >
                            <ul class="list-group list-group-flush">
                                <li class="list-group-item">
                                    <h4>制造</h4>
                                </li>
                                <li class="list-group-item1">
                                    <h3 id="Waitcompleted">{{defaultDt2.length}}套</h3>
                                </li>
                            </ul>
                        </div>
                        <div class="card C" >
                            <ul class="list-group list-group-flush">
                                <li class="list-group-item">
                                    <h4>外协中</h4>
                                </li>
                                <li class="list-group-item1">
                                    <h3 id="Col7Qty1">{{defaultDt3.length}}型</h3>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </header>
        </div>

        <div class="body_div">
            <div class="main-left">
                <div class="border-container">
                    <div class="name-title">
                        模具总保有{{defaultDt1.length}}型
                    </div>
                    <div>
                        <el-table :data="defaultDt1" :default-sort="{prop: 'date', order: 'descending'}" stripe="true" ref="defaultDt1" :height=el_table_height2 :row-class-name="tableRowClassName" :cell-style="{padding:3+'px'}">
                            <el-table-column prop="ModCode" align="center" label="模号">
                            </el-table-column>
                            <el-table-column prop="SAName" align="center" label="负责人">
                            </el-table-column>
                            <el-table-column prop="Month" align="center" label="保有月数">
                            </el-table-column>
                        </el-table>
                    </div>
                    <span class="top-left border-span"></span>
                    <span class="top-right border-span"></span>
                    <span class="bottom-left border-span"></span>
                    <span class="bottom-right border-span"></span>
                </div>

                <div class="border-container">
                    <div class="name-title">
                        设计中{{defaultDt5.length}}型
                    </div>
                    <div>
                        <el-table :data="defaultDt5" :default-sort="{prop: 'date', order: 'descending'}" stripe="true" ref="defaultDt5" :height=el_table_height2 :cell-style="{padding:3+'px'}">
                            <el-table-column prop="ModCode" align="center" label="模号">
                            </el-table-column>
                            <el-table-column prop="TaskName" align="center" label="设计负责人">
                            </el-table-column>
                            <el-table-column prop="Name" align="center" label="项目负责人">
                            </el-table-column>
                        </el-table>
                    </div>
                    <span class="top-left border-span"></span>
                    <span class="top-right border-span"></span>
                    <span class="bottom-left border-span"></span>
                    <span class="bottom-right border-span"></span>
                </div>
            </div>
            <div class="center">
                <div class="border-container1">
                    <div class="name-title">
                        制造中{{defaultDt2.length}}型
                    </div>
                    <div>
                        <el-table :data="defaultDt2" stripe="true" ref="defaultDt2" :height=el_table_height3 :cell-style="{padding:3+'px'}">
                            <el-table-column prop="ModCode" min-width="80" align="center" label="模号">
                            </el-table-column>
                            <!-- <el-table-column prop="SourceType" width="50" align="center" label="状态">
                            </el-table-column> -->
                            <el-table-column width="50" align="center" label="设计">
                                <template slot-scope="scope">
                                    <div v-html="Design(scope)">
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column prop="a" width="117" align="center" label="自制加工">
                                <template slot-scope="scope">
                                    <!-- <el-progress :text-inside="true" :stroke-width="40" :percentage="scope.row.a"></el-progress> -->
                                    <div v-html="Zcutout(scope)">
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column align="center" width="117" label="委外加工">
                                <template slot-scope="scope">
                                    <!-- <el-progress :text-inside="true" :stroke-width="40" :percentage="scope.row.b"></el-progress> -->
                                    <div v-html="Wcutout(scope)">
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column align="center" width="117" label="协作加工">
                                <template slot-scope="scope">
                                    <!-- <el-progress :text-inside="true" :stroke-width="40" :percentage="scope.row.c"></el-progress> -->
                                    <div v-html="Xcutout(scope)">
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column align="center" width="117" label="采购任务">
                                <template slot-scope="scope">
                                    <!-- <el-progress :text-inside="true" :stroke-width="40" :percentage="scope.row.d"></el-progress> -->
                                    <div v-html="Ccutout(scope)">
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column width="117" align="center" label="预算控制">
                                <template slot-scope="scope">
                                    <div v-html="YuSuan(scope)">
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column prop="date" min-width="115" align="center" label="纳期">
                                <template scope="scope">
                                    <span v-if="scope.row.cdata>0" style="color:red">{{ scope.row.date }}</span>
                                    <span v-else style="color: #12f0e9">{{ scope.row.date }}</span>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                    <span class="top-left border-span"></span>
                    <span class="top-right border-span"></span>
                    <span class="bottom-left border-span"></span>
                    <span class="bottom-right border-span"></span>
                </div>
            </div>
            <div class="main-right">
                <div class="border-container">
                    <div class="name-title">
                        外协中{{defaultDt3.length}}型
                    </div>
                    <div>
                        <el-table :data="defaultDt3" :default-sort="{prop: 'date', order: 'descending'}" stripe="true" :height=el_table_height2 ref="defaultDt3" :cell-style="{padding:3+'px'}">
                            <el-table-column prop="ModCode" width="117" align="center" label="模号">
                            </el-table-column>
                            <el-table-column prop="SAName" align="center" label="负责人">
                            </el-table-column>
                            <el-table-column prop="SupplierCode" align="center" label="外协商">
                            </el-table-column>
                        </el-table>
                    </div>
                    <span class="top-left border-span"></span>
                    <span class="top-right border-span"></span>
                    <span class="bottom-left border-span"></span>
                    <span class="bottom-right border-span"></span>
                </div>
                <div class="border-container">
                    <div class="name-title">
                        试模次数排名
                    </div>
                    <div>
                        <el-table :data="defaultDt4" :default-sort="{prop: 'date', order: 'descending'}" stripe="true" :height=el_table_height2 ref="defaultDt4" :row-class-name="tabledefaultDt4" :cell-style="{padding:3+'px'}">
                            <el-table-column prop="ModCode" align="center" label="模号">
                            </el-table-column>
                            <el-table-column prop="SourceMkCode" min-width="117" align="center" label="负责人">
                            </el-table-column>
                            <el-table-column prop="TrialModulus" align="center" label="次数">
                            </el-table-column>
                        </el-table>
                    </div>
                    <span class="top-left border-span"></span>
                    <span class="top-right border-span"></span>
                    <span class="bottom-left border-span"></span>
                    <span class="bottom-right border-span"></span>
                </div>
            </div>
        </div>
    </div>

</body>

<script>
    new Vue({
        el: '#app',
        data() {
            return {
                el_table_height1: 900,
                el_table_height2: 420,
                el_table_height3: 900,
                One: 0,
                Two: 0,
                defaultDt1: [],
                defaultDt2: [],
                defaultDt3: [],
                defaultDt4: [],
                defaultDt5: []
            }
        },
        methods: {
            //测试（加工）
            format(list, index) {
                return () => {
                    return list.jin / list.Qty
                }
            },
            tableRowClassName({
                row,
                rowIndex
            }) {
                if (row.Month >= 10) {
                    return 'greater_ten';
                } else if (row.Month > 5 && row.Month < 10) {
                    return 'greater_five';
                } else if (row.Month <= 5) {
                    return 'less_five';
                }
            },
            tabledefaultDt4({
                row,
                rowIndex
            }) {
                if (row.TrialModulus >= 10) {
                    return 'greater_ten';
                } else if (row.TrialModulus > 5 && row.TrialModulus < 10) {
                    return 'greater_five';
                } else if (row.TrialModulus <= 5) {
                    return 'less_five';
                }
            },
            DateName({
                row,
                rowIndex
            }) {
                if (row.cdata > 0) {
                    return 'greater_ten';
                } else {
                    return 'mo';
                }
            },
            GetTabelDate(that) {
                // 模具总保有
                GetCodeData("VB21082710591831", "Get", "Goods").then(function(res) {
                        that.defaultDt1 = res.rows
                    }),
                    //设计中
                    GetCodeData("VB21090211273589", "Get", "Goods").then(function(res) {
                        that.defaultDt5 = res.rows
                    }),
                    //模具进度
                    GetCodeData("VB21083014581676", "Get", "Goods").then(function(res) {
                        that.defaultDt2 = res.rows
                        that.One = 0;
                        that.Two = 0;
                        that.defaultDt2.forEach(element => {
                            if (element.SourceType == 1) {
                                that.One++ //一次任务单
                            } else if (element.SourceType == 2) {
                                that.Two++ //二次任务单
                            }
                        });
                    }),
                    //外协中
                    GetCodeData("VB21082613453742", "Get", "Goods").then(function(res) {
                        that.defaultDt3 = res.rows
                    }),
                    //试模次数排名
                    GetCodeData("VB21082709250260", "Get", "Goods").then(function(res) {
                        that.defaultDt4 = res.rows
                    })
            },
            formatterTime(row, column) {
                let data = row[column.property]
                return /\d{4}-\d{1,2}-\d{1,2}/g.exec(data)
            },
            Zcutout(cellValue) {
                let _html = "";
                if (cellValue) {
                    _html += "<div>"
                    var _width1 = 100;
                    var _color = "";
                    _width1 = cellValue.row.ZQty * 100 / cellValue.row.ZQuan;
                    if (_width1 > 100) {
                        _width1 = 100;
                    }
                    if (cellValue.row.ZQty < cellValue.row.ZQuan) {
                        _color = "#00a000";
                    } else if (cellValue.row.ZQty > cellValue.row.ZQuan) {
                        _color = "#FF0000";
                    } else {
                        _color = "#008000";
                    }
                    if (cellValue.row.ZQuan > 0) {
                        _html += ("<div  style='border-radius:15px;position: relative; width:100px;padding: 0px;background:#4199fe;overflow: hidden;height:27px;border: 1px solid #95b8e7;'><div style='border-radius:15px;width: " + _width1 + "%; display: block; position: relative; background: " + _color + "; color: #000; height: 40px; line-height: 40px;'>" +
                            "</div>" +
                            "<div style='border-radius:15px;position:absolute;width:100%;height:100%;top:0;display:flex;align-items:center;justify-content:center;color:black;'>" + cellValue.row.ZQty + "/" + cellValue.row.ZQuan + "</div>" +
                            "</div>" +
                            "");
                    } else {
                        _html += ("</div>" +
                            "");
                    }
                    return _html;
                }
            },
            Wcutout(cellValue) {
                let _html = "";
                if (cellValue) {
                    _html += "<div>"
                    var _width1 = 100;
                    var _color = "";
                    _width1 = cellValue.row.WQty * 100 / cellValue.row.WQuan;
                    if (_width1 > 100) {
                        _width1 = 100;
                    }
                    if (cellValue.row.WQty < cellValue.row.WQuan) {
                        _color = "#00a000";
                    } else if (cellValue.row.WQty > cellValue.row.WQuan) {
                        _color = "#FF0000";
                    } else {
                        _color = "#008000";
                    }
                    if (cellValue.row.WQuan > 0) {
                        _html += ("<div  style='border-radius:15px;position: relative; width:100px;padding: 0px;background:#4199fe;overflow: hidden;height:27px;border: 1px solid #95b8e7;'><div style='border-radius:15px;width: " + _width1 + "%; display: block; position: relative; background: " + _color + "; color: #000; height: 40px; line-height: 40px;'>" +
                            "</div>" +
                            "<div style='border-radius:15px;position:absolute;width:100%;height:100%;top:0;display:flex;align-items:center;justify-content:center;color:black;'>" + cellValue.row.WQty + "/" + cellValue.row.WQuan + "</div>" +
                            "</div>" +
                            "");
                    } else {
                        _html += ("</div>" +
                            "");
                    }
                    return _html;
                }
            },
            Xcutout(cellValue) {
                let _html = "";
                if (cellValue) {
                    _html += "<div>"
                    var _width1 = 100;
                    var _color = "";
                    _width1 = cellValue.row.XQty * 100 / cellValue.row.XQuan;
                    if (_width1 > 100) {
                        _width1 = 100;
                    }
                    if (cellValue.row.XQty < cellValue.row.XQuan) {
                        _color = "#00a000";
                    } else if (cellValue.row.XQty > cellValue.row.XQuan) {
                        _color = "#FF0000";
                    } else {
                        _color = "#008000";
                    }
                    if (cellValue.row.XQuan > 0) {
                        _html += ("<div  style='border-radius:15px;position: relative; width:100px;padding: 0px;background:#4199fe;overflow: hidden;height:27px;border: 1px solid #95b8e7;'><div style='border-radius:15px;width: " + _width1 + "%; display: block; position: relative; background: " + _color + "; color: #000; height: 40px; line-height: 40px;'>" +
                            "</div>" +
                            "<div style='border-radius:15px;position:absolute;width:100%;height:100%;top:0;display:flex;align-items:center;justify-content:center;color:black;'>" + cellValue.row.XQty + "/" + cellValue.row.XQuan + "</div>" +
                            "</div>" +
                            "");
                    } else {
                        _html += ("</div>" +
                            "");
                    }
                    return _html;
                }
            },
            Ccutout(cellValue) {
                let _html = "";
                if (cellValue) {
                    _html += "<div>"
                    var _width1 = 100;
                    var _color = "";
                    _width1 = cellValue.row.CQty * 100 / cellValue.row.CQuan;
                    if (_width1 > 100) {
                        _width1 = 100;
                    }
                    if (cellValue.row.CQty < cellValue.row.CQuan) {
                        _color = "#00a000";
                    } else if (cellValue.row.CQty > cellValue.row.CQuan) {
                        _color = "#FF0000";
                    } else {
                        _color = "#008000";
                    }
                    if (cellValue.row.CQuan > 0) {
                        _html += ("<div  style='border-radius:15px;position: relative; width:100px;padding: 0px;background:#4199fe;overflow: hidden;height:27px;border: 1px solid #95b8e7;'><div style='border-radius:15px;width: " + _width1 + "%; display: block; position: relative; background: " + _color + "; color: #000; height: 40px; line-height: 40px;'>" +
                            "</div>" +
                            "<div style='border-radius:15px;position:absolute;width:100%;height:100%;top:0;display:flex;align-items:center;justify-content:center;color:black;'>" + cellValue.row.CQty + "/" + cellValue.row.CQuan + "</div>" +
                            "</div>" +
                            "");
                    } else {
                        _html += ("</div>" +
                            "");
                    }
                    return _html;
                }
            },
            Design(cellValue) {
                let _html = "";
                if (cellValue) {
                    _html += "<div>"
                    var _color = "";
                    if (cellValue.row.Design == 1) {
                        _color = "green";
                    } else if (cellValue.row.Design == 0) {
                        _color = "#4199fe";
                    }
                    //console.log(cellValue.row.Design);
                    if (cellValue.row.Design == 0 || cellValue.row.Design == 1) {
                        _html += ("<div  style='border-radius:15px;position: relative; width:30px;padding: 0px;background: " + _color + ";;overflow: hidden;height:27px;border: 1px solid #95b8e7;'> " +
                            "</div>" +
                            "");
                    } else {
                        _html += ("</div>" +
                            "");
                    }
                    return _html;
                }
            },
            YuSuan(cellValue) {
                let _html = "";
                if (cellValue) {
                    _html += "<div>"
                    var _width1 = 100;
                    var _color = "";
                    _width1 = cellValue.row.a;
                    if (_width1 > 100) {
                        _width1 = 100;
                    }
                    if (cellValue.row.a < 100) {
                        _color = "#00a000";
                    } else if (cellValue.row.a > 100) {
                        _color = "#FF0000";
                    } else {
                        _color = "#008000";
                    }
                    // if (cellValue.row.a > 0) {
                    _html += ("<div  style='border-radius:15px;position: relative; width:100px;padding: 0px;background:#4199fe;overflow: hidden;height:27px;border: 1px solid #95b8e7;'><div style='border-radius:15px;width: " + _width1 + "%; display: block; position: relative; background: " + _color + "; color: #000; height: 40px; line-height: 40px;'>" +
                        "</div>" +
                        "<div style='border-radius:15px;position:absolute;width:100%;height:100%;top:0;display:flex;align-items:center;justify-content:center;color:black;'>" + cellValue.row.a + "%" + "</div>" +
                        "</div>" +
                        "");
                    // } else {
                    //     _html += ("</div>" +
                    //         "");
                    // }
                    return _html;
                }
            },

        },

        mounted() {
            TableAotoRoll([this.$refs.defaultDt1, this.$refs.defaultDt2, this.$refs.defaultDt3, this.$refs.defaultDt4, this.$refs.defaultDt5])
            var that = this
            setTimeout(function() {
                that.GetTabelDate(that)
            }, 0);
            setInterval(function() {
                that.GetTabelDate(that)
            }, 1000 * 60);
        }
    })
</script>



</html>